import React from 'react';
import { Table, Button, Space } from 'antd';
import { EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import { useState } from 'react';

// 自定义钩子
function useTableData() {
    const [data, setData] = useState([
        {key:'1',num:'G01',nam1:'xx标准',nam2:'xx项目',plan:'xx对比方案',appt:'13:12',cpmt:'18:55',sta:'计划中'},
        {key:'2',num:'G02',nam1:'xx标准',nam2:'xx项目',plan:'xx对比方案',appt:'13:12',cpmt:'18:55',sta:'计划中'},
        {key:'3',num:'G03',nam1:'xx标准',nam2:'xx项目',plan:'xx对比方案',appt:'13:12',cpmt:'18:55',sta:'计划中'},
    ]);

    const handleDetails = (record: any) => {
        console.log('Details:', record);
    };

    const handleDelete = (key: string) => {
        setData(data.filter((item) => item.key !== key));
    };

    const exportData = () => {
        const csvContent = "data:text/csv;charset=utf-8," + data.map(e => Object.values(e).toString()).join("\n");
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "table-data.csv");
        document.body.appendChild(link);
        link.click();
    };

    return { data, handleDetails, handleDelete, exportData };
}

const TableComponent: React.FC = () => {
    const { data, handleDetails, handleDelete, exportData } = useTableData();

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '标准编号',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '标准名称',
            dataIndex: 'nam1',
            key: 'nam1',
        },
        {
            title: '项目名称',
            dataIndex: 'nam2',
            key: 'nam2',
        },
        {
            title: '申请方案名称',
            dataIndex: 'plan',
            key: 'plan',
        },
        {
            title: '申请时间',
            dataIndex: 'appt',
            key: 'appt',
        },
        {
            title: '完成时间',
            dataIndex: 'cpmt',
            key: 'cpmt',
        },
        {
            title: '状态',
            dataIndex: 'sta',
            key: 'sta',
        },
    ];

    return (
        <>
            <Button type="primary" onClick={exportData} style={{ marginBottom: 16 }}>
                导出数据
            </Button>
            <Table dataSource={data} columns={columns} pagination={false} />;
        </>
    )
};

export default TableComponent;